<template>
  <div class="outer">
    <div class="box">
      <header class="header fix">
        <a href="javascript:;" class="backImg" @click="trainListBack"></a>
        <p class="titleCity"><span>{{train.go}}</span>-<span>{{train.back}}</span></p>
      </header>

    </div>
    <div class="main">
      <div class="listDetail fix" v-if="!noTrainShow && trainSelected.dto">
        <div class="TDStart">
          <p class="fromS">{{trainSelected.dto.fromStation}}</p>
          <p class="fromT">{{trainSelected.dto.fromTime}}</p>
        </div>
        <div class="pause" @click="trainPause">
          <p class="trainN">{{trainSelected.dto.trainCode}}</p>
          <p class="trainDur">{{trainSelected.dto.costTimeString}}</p>
        </div>
        <div class="TDArrive">
          <p class="fromS">{{trainSelected.dto.arriveStation}}</p>
          <p class="fromT">{{trainSelected.dto.arriveTime}}</p>
        </div>
      </div>
      <div class="listDetail">
        <div class="listDate fix">
          <div class="pre" @click="trainPre"><span class="iconfont icon-llmainpageback"></span>前一天</div>
          <div class="date" @click="dateShow = true">
            {{$store.state.train.month}}月{{$store.state.train.day}}日<span class="iconfont icon-unfold"></span>
          </div>
          <div class="next" @click="trainNext">后一天<span class="iconfont icon-enter"></span></div>
        </div>

        <div class="noTrain" v-if="noTrainShow">
          暂无车次信息，请修改乘车日期
        </div>
        <div v-if="!noTrainShow">
          <div class="listItem fix" v-for="(it,index) in trainSelected.ticketSeatDtos">
            <div class="seat">{{it.seatTypeValue}}</div>
            <div class="seatN">余{{it.seatNum}}张</div>
            <div class="seatP">￥{{it.seatPrice}}</div>
            <!--30分钟内-->
            <div class="bookingBtn" v-if="trainSelected.saleStatus===2">不可售</div>
            <!--这趟车次暂不可售-->
            <div class="bookingBtn" v-if="trainSelected.saleStatus===1">不可售</div>
            <!--正常销售且座位数大于0-->
            <div class="yuding" v-if="trainSelected.saleStatus===0 && parseInt(it.seatNum)>0"
                 @click="trainYuDing(it,index)">预订
            </div>
            <!--座次为0的情况-->
            <div class="bookingBtn" v-if="trainSelected.saleStatus===0 && parseInt(it.seatNum) ===0">已售完</div>
          </div>
        </div>
      </div>
      <div class="listDetail quit-rule">
        <p class="backRule" @click="changeShow=true">退改签规则</p>
      </div>
      <!--退改签规则弹窗-->
      <popup v-model="changeShow" position="bottom" class="changePop">
        <div class="changeTitle">
          退改签规则
        </div>
        <div class="changeItem">
          <p>1、购票成功后，未取票且发车前时间大于35分钟，可通过商旅助手系统在线申请退票；</p>
          <p>2、开车前15天(不含)以上，不收取退票费；</p>
          <p>3、开车前48小时以上的，退票手续费5%；</p>
          <p>4、开车前25-48小时之间，退票手续费10%；</p>
          <p>5、开车前24小时之内，退票手续费20%；</p>
          <p>6、最终退款以铁路局实退为准，退票手续费最低收取2元；</p>
          <p>7、购票成功后，已取票或发车前时间小于35分钟，需您自行携带购票时所使用的乘车人有效证件原件和火车票在发车前去火车站退票窗口办理退票；</p>
        </div>

      </popup>
      <!--暂停信息弹窗-->
      <popup v-model="pauseShow" position="bottom" class="pausePop">
        <div class="pauseTitle">
          列车时刻表
        </div>
        <div class="pauseItem">
          <div class="item1">
            车站
          </div>
          <div class="item2">
            到达
          </div>
          <div class="item3">
            发车
          </div>
          <div class="item4">
            停留
          </div>
        </div>
        <div v-for="(pop,index) in pauseData" class="pauseItem fix">
          <div class="item1">
            {{pop.name}}
          </div>
          <div class="item2">
            {{pop.arriveTime}}
          </div>
          <div class="item3">
            {{pop.startTime}}
          </div>
          <div class="item4">
            {{pop.intervalDetail}}
          </div>
        </div>
        <div class="noTrain" v-if="noPause">
          {{noPauseMsg}}
        </div>
      </popup>
    </div>
    <!--发车30分钟内弹窗 -->
    <alert v-if="alertShow1" class="ll">
      <div class="maneyChange">
        <div>
          <p>{{trainSelected.dto.trainCode}}车次已经暂停发售</p>
          <p>请选择其他车次或日期</p>
        </div>
        <div class="money-a-btn fix">
          <div class="alert-btn" @click="cancelA">重新选择</div>
        </div>
      </div>
    </alert>
    <!--发车2小时内弹窗-->
    <alert v-if="alertShow2" class="ll">
      <div class="maneyChange">
        <div>
          <p>{{msg}}</p>
        </div>
        <div class="money-a-btn fix">
          <div class="money-a-cancel" @click="cancelA">重新选择</div>
          <div class="money-a-success" @click="successA">继续预订</div>
        </div>
      </div>
    </alert>
    <!--无票弹窗-->
    <alert v-if="alertShow3" class="ll">
      <div class="maneyChange">
        <div>
          <p>{{trainSelected.dto.trainCode}}车次余票不足</p>
          <p>请选择其他车次或日期</p>
        </div>
        <div class="money-a-btn fix">
          <div class="alert-btn" @click="cancelA">重新选择</div>
        </div>
      </div>
    </alert>
    <date @dateClick="dateClick" @dateBack="dateBack" v-show="dateShow" :max="max" :openTime="openTime" backCustom="1"></date>
  </div>
</template>


<script>
  import alert from "../../components/alert.vue"
  import date from '../../components/date.vue';
  import {Indicator,Popup} from "mint-ui"
  import train from '@/data/train';
  export default{
    data(){
      return {
        msg: '',
        dateShow: false,
        noTrainShow: false,
        changeShow: false, /*退改签规则*/
        pauseShow: false, /*暂停信息*/
        alertShow1: false, /*30分钟*/
        alertShow2: false, /*2小时*/
        alertShow3: false, /*无票*/
        flightPriceDto: "",
        dateTitle: '10月10日周一',
        titleGoDate: "06:40",
        titleGoCity: '首都机场T2',
        titleGoType: '东方航空HU7604',
        titleBackDate: "06:40",
        titleBackCity: '首都机场T2',
        titleLineInfo: '中型机',
        titleBackType: '经济舱',
        flightType: '',
        date1: '', /*日期插件时间*/
        date: '',
        food: false,
        items: [
          {
            cangwei: '经济舱',
            discount: '全价',
            money: '¥1240'
          },
          {
            cangwei: '经济舱',
            discount: '全价',
            money: '¥1240'
          },
          {
            cangwei: '经济舱',
            discount: '全价',
            money: '¥1240'
          },
          {
            cangwei: '经济舱',
            discount: '全价',
            money: '¥1240'
          },
          {
            cangwei: '经济舱',
            discount: '全价',
            money: '¥1240'
          },
        ],
        trainSelectedupdate: [],
        template: '',//临时保存这趟车次code
      }
    },
    components: {alert, date,Popup},
    methods: {
      trainAjax(val){
        var year = val.substring(0, 4);
        var month = val.substring(5, 7);
        var day = val.substring(8, 10);
        this.$store.state.train.date1 = month + '月' + day + '日';
        this.$store.state.train.travelTime = val;
        this.$store.state.train.month = month;
        this.$store.state.train.day = day;
        var state = this.$store.state;
        var that = this;
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });

        var trainSearchForm = {
          fromCity: this.$store.state.train.go,
          toCity: this.$store.state.train.back,
          travelTime: this.$store.state.train.travelTime,
          trainCode: this.trainSelected.dto.trainCode,
        };

        train.getTrainList(trainSearchForm,function(res){
          var test = res.ticketList;
          if (test === '' || test.length === 0) {
            that.noTrainShow = true;
          } else {
            that.noTrainShow = false;
            that.trainSelectedupdate = res.ticketList.trainList[0];//取这趟车的数据
          }

          if (res.msg == "") {
            that.$store.state.train.train_tanrey_off_on = false;
            state.train.isFiltertext = '';
//                state.train.ticketList = res.ticketList;
          } else {
            that.$store.state.train.train_tanrey_off_on = true;
            state.train.isFiltertext = res.msg;
            if (res.ticketList.trainList != undefined) {
//                  state.train.ticketList = res.ticketList;
            } else {
//                  state.train.ticketList =[];
            }

          }
          //星期列表
          that.$store.state.train.week = res.week;
          //拼接几月几号星期几
          that.$store.state.train.month = that.$store.state.train.travelTime.substring(5, 7);
          that.$store.state.train.day = that.$store.state.train.travelTime.substring(8, 10);
          for (var i = 0; i < that.$store.state.train.week.length; i++) {
            if (that.$store.state.train.week[i].flag == true) {
              that.$store.state.train.Sunday = '周' + that.$store.state.train.week[i].week;
              that.$store.state.train.selected = that.$store.state.train.week[i].id;
            }
          }
          Indicator.close();
        },function(){
          Indicator.close();
          that.$router.push({
            name: 'error',
            params: {
              backName: 'train2',
            }
          });
        });
      },// 重新请求这趟车次
      dateBack(){
        this.dateShow = false;
      },
      dateClick(msg){
        this.dateShow = false;
        this.date = msg;
        this.$store.state.train.openTime = msg;
        this.trainAjax(msg);
      },
      trainListBack(){
        this.$router.go(-1);
      },
      trainPause(){// 请求经停站信息
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
        var trainCode = {
          trainCode: this.trainSelected.dto.trainCode
        };
        var that = this;
        var serverUrl = $tool.getServerUrl();
        $.ajax(
          {
            type: 'get',
            url: serverUrl + '/train/search/queryStopOverStation.json',
            data: trainCode,
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'callback'
          }).done(function (res) {
          if (res.msg == '') {
            //that.noPause = false;
            that.$store.state.train.stopList = res.stopList || '';
          } else {
            //that.noPause = true;
            that.noPauseMsg = res.msg;
          }
          Indicator.close();
          that.pauseShow = true;

        }).fail(function (res) {
          //结束加载动画
          console.log('进错误,跳转');
          Indicator.close();
        })
      }, /*经停站信息*/
      trainPre(){//前一天
        var time = this.$store.state.train.travelTime;
        var currentTime = this.$store.state.currentTime;
        if (time == currentTime) {
        } else {
          var date = new Date(this.$store.state.train.travelTime);
          var dateS = date.getTime();
          var preDateS = new Date(dateS - 24 * 60 * 60 * 1000);
          var y = preDateS.getFullYear();
          var m = (preDateS.getMonth() + 1 < 10 ? '0' + (preDateS.getMonth() + 1) : preDateS.getMonth() + 1);
          var d = (preDateS.getDate() < 10 ? '0' + (preDateS.getDate()) : preDateS.getDate());
          var preDate = y + '-' + m + '-' + d;
          this.$store.state.train.travelTime = preDate;
          this.$store.state.train.openTime = preDate;
          this.$store.state.train.month = m;
          this.$store.state.train.day = d;
          this.trainAjax(preDate);
        }
      }, /*单车次查询*/
      trainNext(){//后一天
        var date = new Date(this.$store.state.train.travelTime);
        var dateS = date.getTime();//拿到毫秒数
        var preDateS = new Date(dateS + 24 * 60 * 60 * 1000);
        var y = preDateS.getFullYear();
        var m = (preDateS.getMonth() + 1 < 10 ? '0' + (preDateS.getMonth() + 1) : preDateS.getMonth() + 1);
        var d = (preDateS.getDate() < 10 ? '0' + (preDateS.getDate()) : preDateS.getDate());
        var preDate = y + '-' + m + '-' + d;
        this.$store.state.train.travelTime = preDate;
        this.$store.state.train.openTime = preDate;
        this.$store.state.train.month = m;
        this.$store.state.train.day = d;
        this.trainAjax(preDate);
      },
      trainBookingIndex(){
        var that = this;
        var serverUrl = $tool.getServerUrl();
        $.ajax({
          type: 'get',
          url: serverUrl + '/train/booking/index.json',
          data: '',
          dataType: 'jsonp',
          jsonp: 'callback'
        }).done(function (res) {
          var recentPassenger = [];

          that.$store.state.train.serviceFee = res.bookBaseInfo.serviceFee;//服务费单价
          that.$store.state.credentialInfo = res.bookBaseInfo.credentialList;  //设置证件类型
          /*设置成火车票的证件类型*/
          that.$store.state.contact = res.bookBaseInfo.contacts;//联系人自己
//            这里myCostCenterList和expenseTree 一开始用反了,所以你也别想着改.坑比较深
          that.$store.state.expenseTravelType.myCostCenterList = res.bookBaseInfo.expenseTree;//我的费用归属树
          if (res.bookBaseInfo.myCostCenterList && res.bookBaseInfo.myCostCenterList.length > 0) {
            res.bookBaseInfo.myCostCenterList[0].selected = true;
            that.$store.state.expenseTravelType.expenseTree = res.bookBaseInfo.myCostCenterList;//我的费用归属
          } else {

          }

          that.$store.state.expenseTravelType.travelTypes = res.bookBaseInfo.travelTypes;
          var userInfo = that.$store.state.userInfo;
          var flagCheck = false;
          for (let recentItem of res.bookBaseInfo.recentPassengerList) {
            let ob = {};
            ob.checked = recentItem.userId == userInfo.userId || !!recentItem.appIsChecked;
            ob.userId = recentItem.userId;
            ob.costUnitCode = '';
            ob.orgId = '';
            ob.corporationId = '';
            ob.amount = '';
            ob.mobile = recentItem.mobile;
            ob.email = recentItem.email;
            ob.travelCode = '';
            ob.empLevelCode = recentItem.empLevelCode;
            ob.isPassEmpLevel = recentItem.isPassEmpLevel;
            ob.name = recentItem.name;
            ob.sex = recentItem.genderValue;
            ob.sexType = recentItem.gender;
            ob.credentialName = recentItem.credentialTypeValue;
            ob.credentialType = recentItem.credentialType;
            ob.passengerType = recentItem.passengerType;
            ob.credentialNo = recentItem.credentialNo;
            ob.travellerType = recentItem.travellerType;
            ob.birthday = recentItem.birthday;
            recentPassenger.unshift(ob);
            if(ob.checked){
              flagCheck = true;
            }
          }
          if(flagCheck == false && userInfo && userInfo.userId){
            if(userInfo.cardType && userInfo.cardType.length > 0) {
              var tmp = null;
              for(var i = 0, iLength = userInfo.cardType.length; i < iLength; i++) {
                if(userInfo.cardType[i].idType === "IDENTITY" || userInfo.cardType[i].idType === "PASSPORT" || userInfo.cardType[i].idType === "GANGAO" || userInfo.cardType[i].idType === "TAIWAN") {
                  tmp = i;
                  break;
                }
              }
              var card;
              if(tmp >= 0) {
                card = userInfo.cardType[tmp];
                recentPassenger.unshift ({
                  checked: true,
                  userId: userInfo.userId,
                  costUnitCode: '',
                  orgId: '',
                  corporationId: '',
                  amount: '',
                  mobile: userInfo.mobile,
                  email: userInfo.email,
                  travelCode: '',
                  empLevelCode: userInfo.rank,
                  isPassEmpLevel: res.bookBaseInfo.loginPassengerInfo.isPassEmpLevel,
                  name: userInfo.name,
                  sex:  userInfo.sex == 0 ? '男' : '女',
                  sexType: userInfo.sex == 0 ? 'M' : 'F',
                  credentialName: that.cardName(card.idType),
                  credentialType: card.idType,
                  passengerType: 'ADU',
                  credentialNo: card.idNumber,
                  travellerType: 3,
                  birthday: userInfo.birthday
                });
              };

            }
          }
          var list = {
            'list': recentPassenger,
            'type': 'pre'
          };

          that.$store.commit('setRecentPassengerList', list);

          that.$store.state.jobTitleRanks = res.bookBaseInfo.jobTitleRanks;
          that.$store.state.reasonData = res.bookBaseInfo.illegalList;

          that.$router.push({
            name: 'trainBooking'
          });
          Indicator.close();
        }).fail(function (res) {
          Indicator.close();
        });
      },
      //把证件信息id转换成对应的文字
      cardName(type) {
        var cardIdName = null;
        $.each(this.$store.state.credentialInfo, function (index, item) {
          if (item.itemCode == type) {
            cardIdName = item.itemTxt;
            return false;
          }
        });
        return cardIdName;
      },
      trainYuDing(item, index){
        var that = this;
        //  清除上次预定保留的 违规数据
        this.$store.state.illegalReasonList = [];
        this.$store.state.illegalPass = false;
        Indicator.open({
          text: "加载中...",
          spinner: 'fading-circle'
        });
        this.$store.state.train.priceIndex = index;
        this.$store.state.train.selectSeat = item;
        for (var k = 0; k < this.trainSelected.ticketSeatDtos.length; k++) {
          this.$store.state.train.trainSelected.ticketSeatDtos[k].selected = false;
        }
        this.$store.state.train.trainSelected.ticketSeatDtos[index].selected = true;
        this.$store.state.train.selectSeat.selected = true;
        /*当前选择的座次*/
        var checkTicket = {
          fromStation: this.$store.state.train.go,
          arriveStation: this.$store.state.train.back,
          travelTime: this.$store.state.train.travelTime + ' ' + that.trainSelected.dto.fromTime,
          trainCode: this.trainSelected.dto.trainCode,//这趟火车的code
          seatType: item.seatType,
        };
        var serverUrl = $tool.getServerUrl();
        $.ajax(
          {
            type: 'get',
            url: serverUrl + '/train/search/checkTicketNum.json',
            data: checkTicket,
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'callback'
          })
          .done(function (res) {
            switch (res.code) {
              case 0: /*顺利通过*/
                that.trainBookingIndex();
                break;
              case 1: /*30分钟*/
                that.alertShow1 = true;
                Indicator.close();
                break;
              case 2: /*没有余票*/
                /*that.$router.push({
                 name:'trainBooking'
                 })*/
                that.alertShow3 = true;
                Indicator.close();
                break;
              case 3: /*120分钟*/
                that.alertShow2 = true;
                that.msg = res.msg
                Indicator.close();
                break;
              default:
                break;
            }
          }).fail(function (res) {
          console.log('进错误,跳转');
          Indicator.close();
        })
      },
      cancelA(){
        this.alertShow1 = false;
        this.alertShow2 = false;
        this.alertShow3 = false;
      }, //      30分钟变动弹窗  取消按钮
      successA(){
        this.alertShow2 = false;
        this.trainBookingIndex();
        this.$router.push({
          name: 'trainBooking'
        })
      },//      30分钟变动弹窗  确认按钮
    },
    mounted(){
      console.log(this.$store.state.userInfo.cardType)
      var index = this.$store.state.train.index;
      var selected = this.$store.state.train.ticketList.trainList[index];
      this.template = selected;//存放选中的车次.当切换日期没有这趟车次的时候.不会undefined
    },
    computed: {
      openTime(){//传给时间插件当前选中时间
        return this.$store.state.train.openTime
      },
      max(){
        return '29'.future();
      },
      index(){
        return this.$store.state.train.index
      },
      train(){
        return this.$store.state.train
      },
      pauseData(){
        return this.$store.state.train.stopList
      }, /*获取经停信息*/
      noPause(){
        if (this.$store.state.train.stopList === '' || this.$store.state.train.stopList === []) {
          return true
        } else {
          return false
        }
      }, /*没有请求到经停信息时候的显示*/
      trainSelected(){
        let selected;
        if (this.trainSelectedupdate == "" || this.trainSelectedupdate == []) {
          selected = this.$store.state.train.trainSelected
        } else {
          selected = this.trainSelectedupdate;
        }
        if (selected == undefined) {
          selected = this.template;
        }
        this.$store.state.train.trainSelected = selected;
        return selected

      }, /*被选中的车次信息*/
      trainList(){
        return this.$store.state.train.ticketList.trainList;
      }
    },
  }
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
  .quit-rule {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .item p {
    float: left;
    font-size: .9rem;
    line-height: 1.3rem;
  }
  .item .yuding {
    float: right;
    width: 2.6rem;
    height: 1.3rem;
    line-height: 1.3rem;
    text-align: center;
    background-color: #0994db;
    color: #fff;
  }
  .noTrain {
    font-size: .8rem;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
  }
  .outer {
    width: 100%;
    position: relative;
    background-color: #fff;
    font-size: .6rem;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    -overflow-scrolling: touch;
  }

  .header {
    background-color: #46a1bb;
    height: 2.2rem;
    background-size: cover;
    color: #fff;
    padding: 0 .75rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
  }

  .backImg {
    flex:  0 0 20%;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: left;
    background: url('../../assets/images/back.png') no-repeat left center;
    background-size: .6rem 1.1rem;
  }

  .main {
    padding-top: 0!important;
    background-color: #e6e6e6;
    .listDetail:nth-child(1) {
      display: flex;
      margin-bottom: .25rem;
      box-sizing: border-box;
      .TDStart {
        flex:  0 0 25%;
        padding-left: .5rem;
        box-sizing: border-box;
        text-align: left;
      }
      .pause {
        flex: 0 0 50%;
        text-align: center;
      }
      .TDArrive {
        padding-right: .5rem;
        box-sizing: border-box;
        flex:  0 0 25%;
        text-align: right;
      }
    }
    .listDetail {
      padding: .75rem .45rem;
      background-color: white;
      .TDStart {
        position: relative;
        float: left;
        width: 4.5rem;
        text-align: left;
        color: #333333;
        .fromS {
          font-size: .75rem;
          margin-bottom: 1rem;
        }
        .fromT {
          font-size: 1.1rem;
          font-weight: 500;
        }
      }
      .TDArrive {
        color: #333333;
        .fromS {
          font-size: .75rem;
          margin-bottom: 1rem;
        }
        .fromT {
          font-size: 1.1rem;
          font-weight: 500;
        }
      }
      .pause {
        position: relative;
        text-align: center;
        background: url("../../assets/images/trainDetailBg.png") no-repeat center center;
        .trainN {
          font-size: .55rem;
          margin-bottom: 1.85rem
        }

        .trainDur {
          font-size: .55rem;
        }
      }
      .listDate {
        display: flex;
        width: 100%;
        color: #46a1bb;
        font-size: .7rem;
        .pre {
          position: relative;
          text-align: left;
          flex: 1;
          height: 2rem;
          line-height: 2rem;
          .icon-llmainpageback {
            font-size: .6rem;
          }
        }
        .date {
          flex: 1;
          text-align: center;
          height: 2rem;
          line-height: 2rem;
          position: relative;
          float: left;
        }
        .next {
          flex: 1;
          text-align: right;
          height: 2rem;
          line-height: 2rem;
          .icon-enter {
            font-size: .6rem;
          }
        }
      }
      .listItem {
        width: 100%;
        color: #333333;
        font-size: .75rem;
        position: relative;
        display: flex;
        .seat {
          flex: 0 0 25%;
          height: 2.5rem;
          line-height: 2.5rem;
          position: relative;
          float: left;
          font-size: .65rem;
        }
        .seatN {
          flex:  0 0 25%;
          text-align: center;
          height: 2.5rem;
          line-height: 2.5rem;
          position: relative;
          float: left;
          font-size: .65rem;
          color: #f60;
        }
        .seatP {
          height: 2.5rem;
          line-height: 2.5rem;
          position: relative;
          flex:  0 0 25%;
          text-align: center;
          color: #f60;
        }
        .bookingBtn {
          width: 2.5rem;
          height: 1.25rem;
          background-color: #ccc;
          color: white;
          text-align: center;
          line-height: 1.25rem;
          border-radius: 8px;
          position: absolute;
          margin-top: 1.25rem;
          transform: translateY(-50%);
          font-size: .65rem;
          right: 0;
        }
        .yuding {
          width: 2.5rem;
          height: 1.25rem;
          background-color: #46a1bb;
          color: white;
          text-align: center;
          line-height: 1.25rem;
          border-radius: 8px;
          position: absolute;
          margin-top: 1.25rem;
          font-size: .65rem;
          transform: translateY(-50%);
          right: 0;
        }

      }
      .backRule {
        font-size: .65rem;
        color: #46a1bb;
      }
    }
  }
  .titleCity {
    flex:  0 0 60%;
    text-align: center;
    line-height: 2.2rem;
    font-size: .9rem;
  }

  .pausePop {
    width: 92%;
    margin: 0 auto 1.25rem;
    height: 27.5rem;
    overflow: scroll;
    .pauseTitle {
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #333333;
      font-size: .8rem;
      border-bottom: 1px solid #bbbbbb; /*no*/
    }
    .pauseItem {
      padding: 0 .5rem;
      .item1 {
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: .7rem;
        position: relative;
        float: left;
        width: 25%;
        text-align: left;
      }
      .item2 {
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: .7rem;
        position: relative;
        float: left;
        width: 25%;
        text-align: center;
      }
      .item3 {
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: .7rem;
        position: relative;
        float: left;
        width: 25%;
        text-align: center;
      }
      .item4 {
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: .7rem;
        position: relative;
        float: left;
        width: 25%;
        text-align: right;
      }
    }
  }

  .changePop {
    width: 92%;
    margin: 20% auto;
    height: 60%;
    overflow: scroll;
    .changeTitle {
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #333333;
      font-size: .75rem;
      border-bottom: 1px solid #eee;
    }
    .changeItem {
      p {
        padding: .5rem .75rem 0 .75rem;
        color: #666;
        font-size: .65rem;
        line-height: 1.5;
      }
    }

  }

</style>

<!--价格变动弹框-->
<style rel="stylesheet/scss" lang="scss" scoped>


  .maneyChange {
    width: 15rem;
    margin-top: 1.25rem;
    font-size: .7rem;
  }

  .maneyChange p {
    padding: 0 1rem;
    margin-bottom: 1rem;
    font-size: .7rem;
    line-height: 1.5em;
  }

  .maneyChange .money-a-btn {
    color: #0094db;
    border-top: 1px solid #eee;
    line-height: 2.5rem;
    height: 2.5rem;
    font-size: .75rem;
  }

  .money-a-cancel {
    float: left;
    width: 50%;
    font-size: .75rem;
    border-right: 1px solid #eee;
    box-sizing: border-box;
  }

  .money-a-success {
    float: right;
    width: 50%;
    font-size: .75rem;
  }


</style>
